<template>
	<div class="Search">
		
<Head></Head>

		<!-- 搜索框 -->
		<van-search v-model="searchString" round placeholder="请输入搜索关键词" @focus="search()" @blur="leave()" />
		
		 <!-- <van-search v-model="searchString" round placeholder="请输入搜索关键词" @onchange="search()" @keydown="leave()" /> -->
		 
		 
		<div :class="{'n': b, 'b': n }">
			<!-- 热门搜索 -->
			<div style="margin-left: .3rem;">
				<h2>热门搜索</h2>
				<van-row>
					<van-col span="6" v-for="item in buttons" style="margin-top: .2rem;margin-bottom: .2rem;" id="rm">
						<van-button round type="default" @click="rm_search">{{item}}</van-button>
					</van-col>
				</van-row>
			</div>


			<!-- 历史记录 -->
			<van-notice-bar mode="closeable" v-for="item in history" style="background-color: #fff;color:gray" id="ls">
				<img src="../assets/img/history.svg" width="15rem" height="15rem" style="margin-right: .2rem;" @click="ls_search">{{item}}
			</van-notice-bar>
			<br />

		</div>

		<!-- 列表 -->
		<div style="margin-left: .3rem;" :class="{'n': n, 'b': b }">
			<ul style="height: 10rem;margin-left: .2rem;margin-right: .2rem">
				<li v-for="article in filteredArticles" style="height: 1.5rem;">
					<a v-bind:href="article.url" style="color:#333;font-size: 0.414634rem;text-align:left;color:#507DAF;">
						{{article.title}}
					</a>
					
					<p style="color:gray;text-align:left;margin-top:0.073171rem;"><span class="SQicon"></span> {{article.content}}</p>
					<router-link :to="article.url">
					<span style="float:right;margin-top: -1rem;">
						<van-icon name="play-circle-o" color="gray" size=".8rem" />
					</span>
					</router-link>
				</li>
			</ul>
		</div>

	
	</div>
	
</template>

<script>
	import Head from './Head.vue';
	
	export default {
		name: 'Search',
		components: {
			Head
		},
		data() {
			return {
				tabcontent: [{
						"text": "推荐音乐",
						"path": "/recommend",
					},
					{
						"text": "热歌榜",
						"path": "/Hot",
					},
					{
						"text": "搜索",
						"path": "/search",
					},
				],
				b: false,
				n: true,
				active: 2,
				texts: ['推荐音乐', '热歌榜', '搜索'],
				buttons: ['海底', '执迷不悟', '陈奕迅', '耗子尾汁', '会不会', '薛之谦', '好运来', '琵琶行', '严选全球'],
				history: ['耗子尾汁', '陈奕迅', '执迷不悟', '会不会'],
				searchString: "",
				articles: [{
						"title": "谁(Live版)",
						"url": "/musicplay",
						"content": "廖俊涛 - 谁(Live版)"
					},
					{
						"title": "APPLE",
						"url": "/musicplay",
						"content": "杨飞机 - 《APPLE》"
					},
					{
						"title": "海底",
						"url": "recommend.vue",
						"content": "一支榴莲 - 《独》"
					},
					{
						"title": "百家姓",
						"url": "https://www.runoob.com/html/html-tutorial.html",
						"content": "陈国芬 - 百家姓"
					},
					{
						"title": "海底",
						"url": "https://www.runoob.com/html/html-tutorial.html",
						"content": "三块木头 - 海底"
					},
					{
						"title": "时间之书",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "林地源 - 时间之书"
					},
					{
						"title": "海底",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "林地源"
					},
					{
						"title": "耗子尾汁",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "Mean - 耗子尾汁"
					},
					{
						"title": "耗子尾汁",
						"url": "https://www.runoob.com/sql/sql-tutorial.html",
						"content": "马保国 - 耗子尾汁"
					},
					{
						"title": "耗子尾汁",
						"url": "https://www.runoob.com/js/js-tutorial.html",
						"content": "王成友 - 耗子尾汁"
					}
				]

			}
		},
		methods:{
			rm_search:function(){
				var rm = document.getElementById("rm");
				console.log(rm);
			},
			ls_search:function(){
				var rm = document.getElementById("ls");
			},
		},
		computed: {
			search: function() {
				this.b = !this.b;
				this.n = !this.n;
			},
			leave: function() {
				this.b = !this.b;
				this.n = !this.n;
			},
			// 计算数学，匹配搜索
			filteredArticles: function() {
				var articles_array = this.articles,
					searchString = this.searchString;

				if (!searchString) {
					return articles_array;
				}

				searchString = searchString.trim().toLowerCase();

				articles_array = articles_array.filter(function(item) {
					if (item.title.toLowerCase().indexOf(searchString) !== -1) {
						return item;
					}
				})

				// 返回过来后的数组
				return articles_array;
			}
		}
	}
</script>

<style scoped>
	.Search{
		background-color: #fff;
		height: 20rem;
		width: 100%;
	}
	.SQicon {
		display: inline-block;
		width: 0.390244rem;
		height: 0.243902rem;
		background: url('../assets/img/rgbg1.png') no-repeat 0px 0px;
		background-size: 191px auto;
		margin-right: 0.097561rem;
	}

	.n {
		display: none;
	}

	.b {
		display: block;
	}
	
	.hidden{
		display: none;
	}

	.list {
		height: 10rem;
		margin-left: .2rem;
		margin-right: .2rem;
	}

	.SQ {
		color: #D43C33;
		border: .01rem solid #D43C33;
		font-size: .1rem;
	}

	.icon {
		float: right;
		margin-top: -1rem;
	}

	.title {
		color: #507DAF;
		font-size: .5rem;
	}

	.right {
		position: relative;
		top: .5rem;
		left: 7.4rem;
		color: #D43C33;
	}

	.nav_ul {
		background-color: #fff;
		margin-left: 1rem;
	}

	.text {
		color: #505050;
	}

	.nav_li {
		margin-right: 1.8rem;
		margin-top: .2rem;
		font-size: .35rem;
		display: inline-block;
	}

	.nav_li:last-child {
		border-bottom: 3px red solid;
	}

	.nav_li:hover {
		margin-right: 1.8rem;
		margin-top: .2rem;
		margin-bottom: .2rem;
		font-size: .35rem;
		display: inline-block;
		/* border-bottom: 3px red solid; */
	}

	.icon {
		float: right;
		margin-top: -1rem;
	}

	.title {
		color: #507DAF;
		font-size: .5rem;
	}

	.right {
		position: relative;
		top: .5rem;
		left: 7.4rem;
		color: #D43C33;
	}

	
</style>
